<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>典型人物</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">      
    <link href="css/style.css" rel="stylesheet">
</head>
<style>
	.table{empty-cells:show;border-collapse:collapse;border-spacing:0;float: left;}
</style>
	<body style="background: #fff;overflow: scroll;position:relative;" >
		<div class="tuzhi-content" id="app">
			<img src="img/dianxing_01.jpg"/>
			<div class="tuzhione">
				<div class="one-content">
					<h1>用户的基本特征</h1>
					<div class="tezhengcontent clearfix">
						<div class="list-box">
							<div class="textinput clearfix">
								<p>特征1</p>
								<input type="" v-model="data.featureOne"  />
							</div>
							<div class="textinput clearfix">
								<p>特征2</p>
								<input type="" v-model="data.featureTwo" />
							</div>
							<div class="textinput clearfix">
								<p>特征3</p>
								<input type="" v-model="data.featureThree" />
							</div>							
						</div>
						<div class="list-box" style="padding-left: 60px;border-right: none;">
							<div class="textinput clearfix">
								<p>特征4</p>
								<input type="" v-model="data.featureFour" />
							</div>
							<div class="textinput clearfix">
								<p>特征5</p>
								<input type="" v-model="data.featureFive" />
							</div>
							<div class="textinput clearfix">
								<p>特征6</p>
								<input type="" v-model="data.featureSix" />
							</div>							
						</div>					
					</div>
					<div class="bancircle clearfix">
						<span></span>
						<span></span>
						<span></span>
						<span></span>						
					</div>
				</div>			
			</div>
			<div class="quescontent clearfix">
				<div class="questentlist">
					<h1>她所处的环境是什么？</h1>
					<ul>
						<li>
							工作环境
							<textarea v-on:blur="post" rows="" v-model="data.environment.Work" cols=""></textarea>
						</li>
						<li>
							生活环境
							<textarea v-on:blur="post" rows="" v-model="data.environment.Live" cols=""></textarea>
						</li>
						<li>
							生存环境
							<textarea v-on:blur="post" rows="" v-model="data.environment.Existence" cols=""></textarea>
						</li>
						<li>
							家庭环境
							<textarea v-on:blur="post" rows="" v-model="data.environment.Family" cols=""></textarea>
						</li>						
					</ul>
				</div>
				<div class="questentlist">
					<h1>她的核心目标是什么？</h1>
					<ul>
						<li>
							职场目标
							<textarea v-on:blur="post" v-model="data.tarGet.marKet" ></textarea>
						</li>
						<li>
							生活目标
							<textarea v-on:blur="post" v-model="data.tarGet.Life" ></textarea>
						</li>
						<li>
							个人爱好
							<textarea v-on:blur="post" v-model="data.tarGet.Hobby" ></textarea>
						</li>
						<li>
							价值实现
							<textarea v-on:blur="post" v-model="data.tarGet.Worth" ></textarea>
						</li>						
					</ul>
				</div>	
				<div class="questentlist">
					<h1>她最迫切解决的是什么？</h1>
					<ul>
						<li>
							最无法忍受哪方面问题
							<textarea v-on:blur="post" v-model="data.Solve.Bear"  ></textarea>
						</li>
						<li>
							<h1>她最关注的问题是什么？</h1>
							希望获得哪方面的提升？
							<textarea v-on:blur="post" v-model="data.Follow.Hope"  ></textarea>
						</li>
						<li>
							<h1>她的公共关系如何？</h1>
							她容易受到谁的影响？
							<textarea v-on:blur="post" v-model="data.Public.Effect" ></textarea>
						</li>
						<li>
							她能影响哪些人？
							<textarea v-on:blur="post" v-model="data.Public.Who" ></textarea>
						</li>						
					</ul>
				</div>	
				<div class="questentlist">
					<h1>她希望获得什么样的解决方案？</h1>
					<ul>
						<li>
							在什么时候？
							<textarea v-on:blur="post" v-model="data.Plan.When" ></textarea>
						</li>
						<li>
							以什么形式？
							<textarea v-on:blur="post" v-model="data.Plan.Form" ></textarea>
						</li>
						<li>
							花什么代价？
							<textarea v-on:blur="post"  v-model="data.Plan.Cost" ></textarea>
						</li>					
					</ul>
				</div>					
			</div>				
		</div>			
	</body>
    <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
	<script src="../js/all.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>	
	<script>
		var model= new Vue({
			el:'#app',
			data:{
				onedata:{},
				listdata:{},
				use:ComFunJS.getQueryString('use'),
				teamId:ComFunJS.getQueryString('teamId'),
				data:{
					featureOne:"",featureTwo:"",featureThree:"",featureFour:"",
					featureFive:"",featureSix:"",environment:{
						Work:"",
						Live:"",
						Existence:"",
						Family:""
					},tarGet:{
						marKet:"",
						Life:"",
						Hobby:"",
						Worth:""
					},Solve:{
						Bear:""
					},Follow:{
						Hope:""			
					},Public:{
						Effect:"",
						Who:""
					},Plan:{
						When:"",
						Form:"",
						Cost:""
					}
				},	
			},
			methods:{
				getlocation:function(){
					if(localStorage.getItem('dianxing')!=''){
						model.data=JSON.parse(localStorage.getItem('dianxing'))
					}
				},
				post:function(){
					localStorage.setItem('dianxing',JSON.stringify(model.data))
				},
	            initWebSocket(teamId){ //初始化weosocket
	                //ws地址
	                const wsuri = ComFunJS.WEBSORCTAPIURL("/webSocketServer/"+this.teamId) ;
	                this.websock = new WebSocket(wsuri);
	                this.websock.onmessage = this.websocketonmessage;
	            },
	            websocketonmessage(e){ //数据接收
	            	var _this=this;
	            	if(e!=undefined){
		            	var redata =JSON.parse(e.data);
						model.data=JSON.parse(redata.teamdraw.content);	            		
	            	}
	            },
	            websocketclose(e){  //关闭
	                console.log("connection closed (" + e.code + ")");
	            }				
			},
			mounted:function(){
				this.$nextTick(function(){
					if(this.use==0){
						model.getlocation();
						this.initWebSocket();
						this.websocketonmessage()
						$('input').attr('readonly','')
						$('textarea').attr('readonly','')							
					}						
				})
			}
		})
	</script>
</html>
